<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css"/>
    <!--    <link rel="stylesheet" href="../../style/shoppingCart.css"/>-->
    <link rel="stylesheet" href="../../style/order.css"/>
    <link rel="stylesheet" href="../../element-ui/index.css"/>
    <style>
        .el-button--primary {
            width: 80px !important;
            color: #fcfbfa;
            background-color: #409EFF;
            border-color: #409EFF;
        }

        .el-header {
            padding: 0 !important;
            background-color: white;
            color: #333;
            text-align: center;
            height: 40px !important;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <div>
                <div style="background-color: rgb(245,245,245) ;
            width: 100%;display: flex;justify-content: space-around">
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal">
                            <el-menu-item v-show="showUser" style="color: rgb(255,68,0) !important;" index="1"><a
                                    href="login.html">亲，请登录</a></el-menu-item>
                            <el-submenu v-show="!showUser" index="1">
                                <template style="" slot="title">
                                    <a style="color: rgb(255,68,0) !important;"
                                       href="user.html">欢迎您，{{user.username}}</a></template>
                                <el-menu-item style="height: 80px" index="2-1">
                                    <div style="">
                                        <a href="user.html">
                                            <el-image
                                                    style="width: 70px; height: 70px; border: none;border-radius: 50%;cursor: pointer;"
                                                    :src="getImage(user.avatar)"
                                                    :preview-src-list="[ `/common/download?name=${user.avatar}` ]">
                                                <div slot="error" class="image-slot">
                                                    <img src="../../style/images/淘公仔2.png"
                                                         style="width: auto; height: 70px; border:none;">
                                                </div>
                                            </el-image>
                                        </a>
                                        <a href="user.html"> &nbsp;&nbsp;账号管理</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a @click="logout()">退出</a>
                                    </div>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item index="2"><a href="register.html">免费注册</a></el-menu-item>
                        </el-menu>
                    </div>
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                        >

                            <el-menu-item index="1"><a href="index.html" target="_blank">返回首页</a></el-menu-item>
                            <el-menu-item index="2"><a href="user.html" target="_blank">我的淘淘</a></el-menu-item>
                            <el-menu-item index="3"><a href="#" target="_blank">我的足迹</a></el-menu-item>
                            <el-menu-item index="4" class="el-icon-shopping-cart-2"
                                          style="color: rgb(255,68,0) !important;font-size: 16px !important;">
                                <a href="shoppingCart.html" target="_blank"
                                   style="color: rgb(108,108,108) !important;font-size: 12px !important;">&nbsp;&nbsp;购物车</a>
                            </el-menu-item>
                            <el-menu-item class="el-icon-star-on" style="font-size: 16px !important;" index="5">
                                <a style="font-size: 12px !important;" href="#" target="_blank">&nbsp;收藏的宝贝
                                </a></el-menu-item>
                        </el-menu>
                    </div>
                </div>

            </div>


        </el-header>
        <el-main class="main"
                 style="background-color: white;display: flex;justify-content: center;overflow-y: inherit">
            <div>
                <el-backtop target=".main" style="color: rgb(255,68,0)"></el-backtop>
                <div class="mainContainer" style="height:1000px">
                    <div class="secondWrapper" style="">
                        <h1 class="Mytao">
                            <a href="user.html">我的淘淘</a>
                        </h1>
                        <div class="step">
                            <el-steps :active="1" align-center>
                                <el-step title="拍下商品"></el-step>
                                <el-step title="付款到支付宝"></el-step>
                                <el-step title="确认收货"></el-step>
                                <el-step title="评价"></el-step>
                            </el-steps>
                        </div>

                    </div>

                    <div class="address">
                        <h3 style="text-align: left">选择收货地址</h3>
                        <div class="addressListContainer">
                            <div v-for="(address,index) in addressList" class="addressList" :key="index">
                                <div class="one">

                                    <span>
                                        {{address.provinceName}}&nbsp;
                                        {{address.cityName}}&nbsp;
                                        ({{address.consignee}}收)</span>
                                    <el-checkbox v-model="address.checked" @change="checkedChange(address.checked)" style="position: absolute;right: 0"></el-checkbox>
                                </div>
                                <div class="two">
                                    {{address.districtName}}&nbsp;
                                    {{address.detail}}&nbsp;
                                    {{address.phone}}&nbsp;
                                    <button size="mini" class="updateBtn" style="">修改</button>
                                </div>
                            </div>

                        </div>
                        <div style="margin: 10px 0 20px 0">
                            <button class="updateBtn" style="border: 1px solid silver;border-radius: 3px">使用新地址</button>
                            <a href="address.html" target="_blank" class="updateBtn" style="float: right">管理收货地址</a>
                        </div>

                        <div class="Parallelograms">
                            <div v-for="Parallelogram2 in 20" class="Parallelogram"></div>
                        </div>
                    </div>
                    <div class="order">
                        <h3>确认订单信息</h3>
                            <div class="orderContainer" style="">
                                <div class="orderHeader">
                                    <span style="width: 250px; ">商品信息</span>
                                    <span style="; " class="price">单价</span>
                                    <span style="margin-left: 60px; ">数量</span>
                                    <span style="; ">金额</span>
                                </div>
                                <div v-for="goods in goodsList" class="goodsContainer">
                                    <div  class="name" >
                                        <el-image
                                                @click="toGoodsDetail(goods.goodsId)"
                                                style="width: 90px; height: 90px; border: none;cursor: pointer;"
                                                :src="getImage(goods.image)"
                                        >
                                            <div slot="error" class="image-slot">
                                                <img src="../../style/404.jpg"
                                                     style="width: auto; height: 90px; border:none;">
                                            </div>
                                        </el-image>
                                        <span style="width: 200px;font-size: 14px">{{goods.name}}</span>
                                    </div>
                                    <div>
                                       <span>￥{{goods.price}}</span>
                                        <b style="font-weight: initial;font-size: 12px;text-decoration: line-through;color: #777676">
                                            ￥{{goods.price + 100}}</b>

                                    </div>
                                    <div>
                                        <el-input-number size="mini" v-model="goods.number"
                                                         size="small"
                                                         :min="1"
                                                         :max="10" label="描述文字">

                                        </el-input-number>
                                    </div>

                                    <div style="color: rgb(255,68,0)">
                                        ￥{{goods.price * goods.number}}
                                    </div>
                            </div>
                        </div>
                        <div style="position: relative">
                            <div class="orderInfo">
                                <span style="font-weight:bold;">实付款:</span>￥
                                <span style="font-weight: bolder;font-size:36px;color: rgb(255,0,54)">{{getPrice}}</span>
                                <p style="font-size: 12px">
                                    <span style="font-weight:bold;">寄送至： </span>云南 文山 文山 新平 高山流水新区</p>
                                <p style="font-size: 12px"><span style="font-weight:bold;">收货人： </span>王卫宏 18487803384</p>
                            </div>
                            <div style="top : 150px;right: 0;position: absolute">
                                <button  class="submit" >提交订单</button></div>
                        </div>
                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../js/axios.min.js"></script>
<script src="../../js/frontInterceptors.js"></script>
<script src="../../js/validateAddress.js"></script>
<script src="../../js/common.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                goodsList: [
                    {
                        id: 1,
                        number: 1,
                        goodsId: '',
                        image: '../style/404.jpg',
                        name: '原创独家樱花兔子花环可爱钥匙扣包包挂件礼物小吊坠饰',
                        price: 2700,
                        amount: 2700,
                        flags: [
                            "帆布鞋", "休闲鞋", "板鞋", "运动鞋"
                        ],
                        checked:false
                    }
                ],
                checkAll: false,
                showBtn: true,
                addressList: [{
                    label: '家',
                    consignee: '小明',
                    sex: 1,
                    phone: '1234567890',
                    detail: '王者峡谷',
                    address: '云南文山',
                    is_default: false,
                    postcode: ''
                },{
                    label: '家',
                    consignee: '小明',
                    sex: 1,
                    phone: '1234567890',
                    detail: '王者峡谷',
                    address: '云南文山',
                    is_default: false,
                    postcode: ''
                }],
                province: [],
                ruleForm: {
                    label: '',
                    consignee: '',
                    sex: '',
                    phone: '',
                    detail: '',
                    address: '',
                    is_default: false,
                    postcode: ''
                },
                form: {
                    address: [],
                    number: 0,
                },
                user: {},
                showUser: true,
            }
        },
        computed: {
            getPrice(){
                let price = 0
                this.goodsList.forEach(item=>{
                    price += item.price * item.number
                })
                return price
            },
            rules() {
                return {
                    //账号
                    detail: [{required: true, 'validator': checkDetailAddress, trigger: 'blur'}],
                    address: [{required: true, 'validator': checkAddress, trigger: 'blur'}],
                    consignee: [{required: true, 'validator': checkName, trigger: 'blur'}],
                    phone: [{required: true, 'validator': checkPhone, trigger: 'blur'}],
                }
            }

        },
        watch: {},
        created() {
            this.getProvince()
            this.selectAddress()
            this.getGoodsList()

        },
        methods: {
            checkedChange (val) {
                console.log(val)
                if (val === true) {
                    for (let i in this.addressList) {
                        this.addressList[i].checked = false
                    }
                }
                // this.checkAll = this.goodsList.every(function (obj) {
                //     return obj.checked == true
                // })
            },
            async getGoodsList() {
                let params = parseUrl(window.location.href);
                // console.log(params)
                const {data: res} = await axios.get("/shoppingCart?ids="+params.id)
                // console.log(res.data)
                if (res.code === 1) {
                    this.goodsList = res.data
                } else {
                    this.$message({
                        message: '地址查询失败',
                        type: 'error'
                    })
                }
            },
            async selectAddress() {
                const {data: res} = await axios.get("/addressBook/list")
                // console.log(res.data)
                if (res.code === 1) {
                    this.addressList = res.data
                } else {
                    this.$message({
                        message: '地址查询失败',
                        type: 'error'
                    })
                }
            },


            async handleEdit(index, row) {
                // console.log(row.isDefault);
                this.showBtn = false
                let gender = (row.consignee.charAt(row.consignee.length - 2) +
                    row.consignee.charAt(row.consignee.length - 1))

                let name = row.consignee.split(gender)[0]
                this.ruleForm = {
                    id: row.id,
                    sex: gender,
                    consignee: name,
                    phone: row.phone,
                    postcode: row.postcode,
                    provinceCode: this.ruleForm.address[0],
                    cityCode: this.ruleForm.address[1],
                    districtCode: this.ruleForm.address[2],
                    detail: row.detail,
                    label: row.label,
                    is_default: row.isDefault === 1
                }
            },


            async handleDefault(index, row) {

                const {data: res} = await axios.put('/addressBook/default?id=' + row.id)
                if (res.code === 1) {
                    this.$message({
                        message: res.data,
                        type: 'success'
                    })
                    this.selectAddress()
                } else {
                    this.$message({
                        message: '地址保存失败',
                        type: 'error'
                    })
                }
            },
            handleDelete(index, row) {
                // console.log(index, row);
                this.$confirm('确认要删除改地址吗？?', '删除地址', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    axios.delete('/addressBook?ids=' + row.id).then((res => {
                            if (res.data.code === 1) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.data
                                });
                                this.selectAddress()
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: res.data.data
                                });
                            }
                        })
                    )
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async save() {
                let params = {
                    id: this.ruleForm.id,
                    consignee: this.ruleForm.consignee,
                    sex: this.ruleForm.sex === '女士' ? 0 : 1,
                    phone: this.ruleForm.phone,
                    postcode: this.ruleForm.postcode,
                    provinceCode: this.ruleForm.address[0],
                    cityCode: this.ruleForm.address[1],
                    districtCode: this.ruleForm.address[2],
                    detail: this.ruleForm.detail,
                    label: this.ruleForm.label,
                    isDefault: this.ruleForm.is_default ? 1 : 0
                }
                const {data: res} = await axios.post('/addressBook', params)
                if (res.code === 1) {
                    this.$message({
                        message: res.data,
                        type: 'success'
                    })
                    this.selectAddress()
                } else {
                    this.$message({
                        message: '地址保存失败',
                        type: 'error'
                    })
                }
                this.ruleForm = ''
                this.showBtn = true
            },
            async getProvince() {
                const {data: res} = await axios.get(`/district/list/${86}`)
                this.province = res.data
                // console.log(this.value)
            },

            handleChange(value) {
                // console.log(value);
                // console.log(this.province);
            },
            async logout() {
                const {data: res} = await axios.post('/user/logout')
                if (res.code === 1) {
                    localStorage.removeItem("user")
                    window.location.href = '/pages/front/index.html'
                }
            },

            getImage(image) {
                return `/common/download?name=${image}`
            },
        },
        mounted() {
        }
    })
</script>
</body>
</html>